<template>
	<view class="service_list">
		<view class="service_label">
			qq客服:
		</view>
		<view class="service_item flexRow" v-for="(item,key) in kf">
			<view class="service_item_l flexRow">
				<image class="service_name" src="/static/img/seivice_name.png" mode=""></image>
				<view class="">
					<view class="name_title">
						客服{{key+1}}
					</view>
				<!-- 	<view class="name_text">
						小赞同学
					</view> -->
				</view>
			</view>
			<view class="service_item_r flexRow" :key="key" @tap="toQQ(item)">
				<image class="service_qq" src="/static/img/seivice_qq.png" mode=""></image>
				<view class="">
					<view class="name_title">
						{{item}}
					</view>
				<!-- 	<view class="name_text">
						88888888
					</view> -->
				</view>
			</view>
		</view>
		<view class="service_label">
			qq群:
		</view>
		<view class="service_item flexRow" v-for="(item,key) in group">
			<view class="service_item_l flexRow">
				<image class="service_name" src="/static/img/seivice_name.png" mode=""></image>
				<view class="">
					<view class="name_title">
						qq群{{key+1}}
					</view>
				</view>
			</view>
			<view class="service_item_r flexRow" :key="key" @tap="togroup(item)">
				<image class="service_qq" src="/static/img/seivice_qq.png" mode=""></image>
				<view class="">
					<view class="name_title">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="divider"></view>
		<view class="task_label flexRow">
			<image src="/static/img/task_lable.png"></image>
			<view>工作时间：</view>
		</view>
		<view class="work_time">
			周一至周五 9:00-21：00
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				group: [],
				kf: []
			}
		},
		methods: {
			toQQ(item){
				plus.runtime.openURL('mqqapi://card/show_pslcard?src_type=internal&version=1&uin='+item, function(res) {
					console.log(res)
					if(res){
						uni.showToast({
						    title: res.message,
							icon: 'none',
						    duration: 2000
						})
					}
				})
			},
			togroup(item){
				plus.runtime.openURL('mqqapi://card/show_pslcard?src_type=internal&version=1&card_type=group&uin='+item, function(res) {
					console.log(res)
					if(res){
						uni.showToast({
						    title: res.message,
							icon: 'none',
						    duration: 2000
						})
					}
				})
			}
		},
		onLoad() {
			let call = uni.getStorageSync('call');
			this.group = call.group
			this.kf = call.kf
		}
	}
</script>

<style>
.service_list{
	padding-top: 60rpx;
}	
.service_item{
	align-items: center;
	box-sizing: border-box;
	padding-left: 40rpx;
	margin-bottom: 60rpx;
}
.service_item_l,.service_item_r{
	flex: 1;
	align-items: center;
}
.name_title{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(51,51,51,1);
}
.name_text{
	font-size:22rpx;
	font-family:Source Han Sans SC;
	font-weight:400;
	color:rgba(100,100,100,1);
}
.service_name{
	width: 68rpx;
	height: 70rpx;
	margin-right: 20rpx;
}
.service_qq{
	width: 69rpx;
	height: 80rpx;
	margin-right: 20rpx;
}
.divider{
	width:100%;
	height:1rpx;
	background:rgba(238,238,238,1);
}
.task_label{
	padding-left: 20rpx;
}
.work_time{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	font-weight:bold;
	color:rgba(51,51,51,1);
	line-height:54rpx;
	padding-left: 40rpx;
	margin-top: 40rpx;
}
.service_label{
	font-size:28rpx;
	font-family:Source Han Sans SC;
	margin: 20rpx 0;
	padding-left: 20rpx;
}
</style>
